import React from 'react';
import { Order } from '../../pouch/models/Order';
import * as ecStat from 'echarts-stat';
import { useTranslation } from 'react-i18next';
import EChartsReact from 'echarts-for-react';

export default function MileageHistogram(props: {orders: Order[]}) {
	const {t} = useTranslation();

	const data = props.orders.map(it => it.mileage / 1000);

	const bins = ecStat.histogram(data, 'squareRoot');

	const options = {
		title: {
			text: t('title-mileage-histogram'),
			left: 'center',
		},
		grid: {
			left: '3%',
			right: '3%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: {
			// boundaryGap: '5%',
			scale: true, //这个一定要设，不然barWidth和bins对应不上
		},
		yAxis: {
		},
		series: [{
			name: 'height',
			type: 'bar',
			barWidth: '99.3%',
			// barCategoryGap: 0,
			label: {
				normal: {
					show: true,
					position: 'insideTop'
				}
			},
			data: bins.data
		}]
	};

	return <EChartsReact option={options} />;
}
